/*
 * @Author: paul.shuai 
 * @Date: 2020-06-03 16:05:04 
 * @Last Modified by: paul.shuai
 * @Last Modified time: 2020-06-03 16:05:36
 */

<template>
    <div class="activity" :style="{backgroundImage: 'url(' + require('@/assets/images/card/pagebg.jpg')+ ')' }" >
        <p class="title">常见问题</p>
        <ul>
            <li>
                <div class="topbox" @click="showModal(0)">
                    <span class="left">Q：</span>
                    <p class="tip">第八代经典杜康和之前几代有什么不同</p>
                    <span v-if="active !=0" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==0" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==0">
                    <span>A:</span>
                    <p> 第八代经典杜康，品质始终如一，风格
                        更加凸显，对包装、防伪等方面进行了全
                        面升级，以更好的满足消费者对美好生活
                        的需求，进一步彰显杜康的品牌魅力！</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(1)">
                    <span class="left">Q：</span>
                    <p class="tip">如何鉴别第八代经典杜康？</p>
                    <span v-if="active !=1" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==1" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==1">
                    <span>A:</span>
                    <p> 首先请确认外包装完好，是否有开启痕
                        迹；在外盒盒盖位置贴有“3D动态影像防伪
                        标识”， 用灯光照射该标签，杜康厂徽晶
                        莹剔透，随光的变化逐渐流畅地放大缩
                        小，“正品”两字在灯光下任意角度交替转动
                        显示。
                        在瓶盖位置贴有“纳米光变防伪标识”， 标签
                        上半部分的厂徽在自然光下，转变观察角
                        度，颜色发生变化，标签下半部分在自然
                        光下转变观察角度，厂徽不间断闪烁。
                        查询结果仅供参考，请核对信息与实物是
                        否一致，并结合其他鉴别方式进行综合判
                        断。最终判定结果以国家授权机构出具结
                        论为准。</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(2)">
                    <span class="left">Q：</span>
                    <p class="tip">第八代经典杜康价格是多少？</p>
                    <span v-if="active !=2" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==2" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==2">
                    <span>A:</span>
                    <p> 建议您在公众号中搜索您附近的门店，联系门店询问购买价格。</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(3)">
                    <span class="left">Q：</span>
                    <p class="tip">哪里可以买到杜康产品？网上购买的是杜康产品吗？</p>
                    <span v-if="active !=3" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==3" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==3">
                    <span>A:</span>
                    <p> 通过杜康官网
                        https: //www.wuliangye.com.cn点击“经销商
                        查询”， 查询购买者所在地的授权经销商
                        （旗舰店、专卖店、运营商）； 购买第八
                        代经典杜康，购买产品时请索取发票或
                        其他凭证，作为证据留存。
                        在正规大型的商超购买第八代经典五粮
                        液，购买时请索取发票等相应凭证。</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(4)">
                    <span class="left">Q：</span>
                    <p class="tip">第一次扫码为什么告知重复扫码？</p>
                    <span v-if="active !=4" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==4" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==4">
                    <span>A:</span>
                    <p> 盖内码为一次性码，二次扫码会显示已被
                        重复扫码。若您首次扫码即被告知重复扫
                        码，请联系售卖点，或通过合法渠道维护
                        自己的权益。</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(5)">
                    <span class="left">Q：</span>
                    <p class="tip">为什么会出现该二维码无法识别的情况？</p>
                    <span v-if="active !=5" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==5" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==5">
                    <span>A:</span>
                    <p> 如果扫码出现二维码无法识别的情况，说
                        明杜康系统无法找到该码。请确保您扫
                        码操作正确。如果仍无法识别，请联系您
                        所购买的渠道核实，或通过合法渠道维护
                        自己的权益。</p>
                </div>
            </li>
            <li>
                <div class="topbox" @click="showModal(6)">
                    <span class="left">Q：</span>
                    <p class="tip">哪里可以查看我的开瓶扫码记录？</p>
                    <span v-if="active !=6" class="iconfont iconzuojiantou-copy-copy"></span>
                    <span v-if="active ==6" class="iconfont iconzuojiantou-copy"></span>
                </div>
                <div class="desc" v-if="active ==6">
                    <span>A:</span>
                    <p> 在您关注公众号“杜康消费者俱乐部”加入会员后，可在会员中心查看您的开屏扫码记录</p>
                </div>
            </li>
        </ul>
        <div class="index_bottom">
            <img class="logo" :src="require('@/assets/images/card/logobttm.png')" />
            <div class="title">杜康消费者俱乐部</div>
            <div class="title">DUKANGCLUB</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CustomerService',
    components:{
        
    },
    data () {
        return {
           active:null, 
        }
    },
    methods: {    
        showModal(ev){
            if (ev==this.active) {
                this.active = null;
            } else {
                this.active = ev;
            }            
        }
    }
}
</script>

<style lang="scss">
.activity{min-height: 100vh;padding: 30px 40px 0 40px;}
    .title{
        font-size: 40px;line-height: 140px;color: #f9cc78;
    }
    ul{
        width: 670px;margin: 0 auto;
        li{
            border: 4px solid #262626;width: 100%;padding: 25px;margin-bottom: 42px;;
            box-sizing: border-box;
            .topbox{
                display: flex;justify-content: flex-start;align-items: flex-start;padding-bottom:30px;
                .left{color: #fff;font-weight: bold;font-size: 26px;margin-right: 25px;}
                p.tip{width: 450px;font-size: 26px;color: #fff;margin-right: 50px;font-weight: bold;}
                .iconzuojiantou-copy-copy,.iconzuojiantou-copy{font-size: 26px;color: #888;}
            }
            .desc{
                display: flex;justify-content: flex-start;align-items: flex-start;
                border-top: 2px solid #726449;padding-top: 25px;
                span{line-height: 50px;margin-right: 25px;font-size: 26px;color: #fff;}
                p{line-height: 50px;font-size: 26px;color: #fff;}
            }
        }
    }
    .index_bottom{
        width:100%;
        text-align: center;
        padding: 40px 0px;
        .logo{
            width: 140px;
            // height: 160px;
            margin: 20px 0px;
        }
        .title{
            font-size: 26px;
            line-height: 44px;
            color: #ccb484;
        }
    }
</style>
